<template>
<el-dialog
    title=""
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="close"
    :append-to-body="true"
    ref="dialog"
    width="800px">
    <div class="dialog-body">
        <!-- <el-scrollbar style="height:100%;">
            <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                ref="tree">
            </el-tree>
        </el-scrollbar> -->

                <!-- :filter-node-method="filterNode" -->
        <!-- <el-row style="height:100%;">
            <el-col :span="12" style="height:100%;">
            1
            </el-col>
            <el-col :span="12">2</el-col>
        </el-row> -->
        <div class="flex full-height">
            <div class="flex-1 full-height">
                <div class="flex column">
                    <el-input
                        placeholder="输入关键字进行过滤"
                        v-model="filterText"/>
                    <div class="flex-1 full-height">
                        <el-scrollbar style="height:100%;">
                            <el-tree
                                class="filter-tree"
                                :data="data"
                                :props="defaultProps"
                                default-expand-all
                                ref="tree">
                            </el-tree>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
            <div class="flex-1 full-height"></div>
        </div>
        </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="commit">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'NameTree',
    props: {
        visible: [Boolean],
        value: [String]
    },
    created () {
        console.log(this.$refs.dialog)
    },
    data () {
        return {
            // show: this.visible
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        close () {
            this.$emit('update:visible', false)
        },
        commit () {
            this.close()
            this.$emit('update:value', '12312313')
        },
        methods: {
            filterNode (value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-body{
    height: 50vh;
    overflow: hidden;
}
.flex {
    display: flex;
    &.column{
        flex-direction: column;
    }
    .flex-1{
        flex: 1
    }
}
.full-height{
    height: 100%;
}
</style>
